<template>
  <div class="playList">
    <list-top :detail="state.detail"></list-top>
    <song-list :detail="state.detail"></song-list>
    <router-view></router-view>
  </div>
</template>
<script>
import ListTop from "@/components/childCom/ListTop.vue";
import SongList from "@/components/childCom/SongList.vue";
import store from "@/store/index.js";
import { getPlayList } from "@/api/index.js";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";

export default {
  setup() {
    const route = useRoute();
    let state = reactive({
      list: [],
      detail: {
        creator: {},
        tracks: []
      }
    });
    onMounted(async () => {
      let id = route.query.id;
      let res = await getPlayList(id);
      state.detail = res.data.playlist;
      store.commit("setPlayList", state.detail.tracks);

      console.log(state.detail);
    });
    return {
      state
    };
  },

  components: {
    ListTop,
    SongList
  }
};
</script>
<style scoped>
</style>